import React, { Component } from 'react'
import {Button} from 'antd'
import { CSSTransition, TransitionGroup } from 'react-transition-group'

class Test1 extends Component {
  state = {num: 0}
  onToggle = () => this.setState({num: (this.state.num + 1) % 2})
  render () {
    const { num } = this.state
    return (
      <div>
        <Button onClick={this.onToggle.bind(this)}>toggle</Button>
        <TransitionGroup>
          <CSSTransition
            key={num}
            timeout={10000}
            classNames='translationtoLeft'
          >
            <div style={{width: '100px', height: '100px', background: 'red', position: 'absolute'}}>{num}</div>
          </CSSTransition>
        </TransitionGroup>
      </div>
    )
  }
}

export default Test1